<template>
    <div class="sear">
        <div class="Top">
            <Top_nav class="wh"></Top_nav>
            <hr />
            <div class="search wh">
                <span class="img1">1</span>

                <el-icon class="icon1">
                    <Search />
                </el-icon>

                <input type="text" placeholder="文章/医生/疾病/医院" v-model.lazy="str" />
                <span @:click="go()" id="sp1">搜索</span>
                <!-- @:click="seaeched(str)" -->
            </div>

            <!-- <router-view name="path"></router-view> -->

            <div class="sp_ar wh">
                <!-- <router-link :to=el[1] v-for="(el,index) in ar" > -->
                <span v-for="(el,index) in ar" :class="{'wh':true,'wh2':w2_bum==index}" @:click="change(index)">
                    {{ el[0] }}
                </span>
                <!-- </router-link> -->
            </div>
        </div>
        <div className="content wh" style="background: #F2F3F5">
            <router-view></router-view>

        </div>
        <!-- https://img1.dxycdn.com/2020/0608/751/3417902467743679536-22.png -->
        <Foot></Foot>
    </div>
</template>

<script setup lang="ts">
import { ref, watch, onMounted, toRefs, toRef } from 'vue';
import Top_nav from './top_nav.vue'
import Foot from './foot.vue'

import axios from "axios";
import { useRouter } from 'vue-router';
import store from "@/store/S_zc"


let sto = toRefs(store().cache)


function go() {
    router.push('/Null')
    console.log("null")
    router.push('/Recommend')
    console.log("Recommend")
    w2_bum.value =0
}

// let ar3 = [Recommend, Doctor, Hospital, Null], ar3_index = ref(3)

let router = useRouter()


onMounted(() => {   //网络请求获取数据
    console.log(sto.str.value,"sto")
    let Mdata = router.currentRoute.value.query.searched
    console.log(Mdata) // 首页跳转查询的关键词

    if (Mdata) {
        // seaeched(Mdata as string, ['symptoms', 'disease'])
        router.push(ar[0][1])
    } else {
        router.push(ar[3][1])
    }
})

let ar = [["推荐", '/Recommend'], ["医生", '/Doctor'], ["医院", '/Hospital'], ["药品", '/Null']],
    ar2 = [['symptoms', 'disease'], ["goods", "detail"], ["hospital", 'name'], []]

let w2_bum: any = ref(0)

let str: any = ref(''), arr = ref([]), count: any = ref(0)
// str input 关键字
watch(str, (newdata, olddata) => {
    // seaeched(str.value)
    store().change(str.value)
    console.log(sto.str, "sto2")
    // 节流
})





function change(x: number): void {

    router.push(ar[x][1])
    if (str.value != '') {
        // seaeched(str.value, ar2[x])
    }

    w2_bum.value = x  //w2_bum样式
    console.log(str.value, "str")
}




let y = ref(0)
const onScroll = () => { y.value = document.documentElement.scrollTop }
window.addEventListener('scroll', onScroll, true)

let ding: any = ref("relative"), num: any = ref(0)
watch(y, (newdata, olddata) => {
    if (newdata > 60) {
        ding.value = "fixed"
        num.value = '110px'
    } else if (newdata <= 60) {
        ding.value = "relative"
        num.value = '0'
    }
})


// watch(count, (newdata, olddata) => {
//     console.log(newdata)
//     if (newdata as unknown as number == 0) {

//     } else if (((newdata as unknown as number) > 2) && (newdata.value < 4)) {
//         let timer=setInterval(()=>{

//         })
//     } else if (newdata as unknown as number > 3) {
//         alert("不要重复点击")
//     }
// })


</script>


<style scoped  lang="scss">
* {
    margin: 0;

    span {
        display: inline-block;
    }
}


.wh {
    color: #444c57;
    background-color: white;
}

.wh2 {
    color: #00c792;
}

.sear {
    background: #F2F3F5;
}

hr {
    border: 0.5px #e8e9eb solid !important;
}

.search {
    width: 100%;
    padding: 30px 0;
    padding-left: calc(50% - 590px);

    position: v-bind(ding) !important;
    // position: fixed;
    top: 0;
    z-index: 233;

    .img1 {
        color: transparent;
        width: 160px;
        height: 46px;
        line-height: 46px;
        background-image: url("./picture/1.png");
        background-position: -40px -5px;
        background-size: 120%;
    }

    input {
        width: 510px;
        height: 46px;
        font-size: 16px;
        margin: 0;
        padding: 0;
        padding-left: 40PX;
        border: 0;
        background-color: #CCE8CF;

        &:focus {
            outline: none;
        }

    }

    #sp1 {
        padding: 0;
        width: 138px;
        height: 46px;
        display: inline-block;
        text-align: center;
        color: white;
        line-height: 44px;
        border-color: transparent;
        background-color: #00c792;

        &:hover {
            opacity: 0.7;
        }

    }

}

.sp_ar {
    padding: 8px 0 16px calc(50% - 590px);
    margin-top: v-bind(num);

    span {
        font-weight: 500;
        width: 32px;
        height: 20px;
        padding: 0 20px;

        &:hover {
            color: #00c792;
        }
    }
}

.content {
    width: 1180px;
    min-height: 186px;
    margin: 20px auto;
    // padding: 100px 0;
    border-radius: 5px;
}

.Top {
    width: 100%;
}

.icon1 {
    position: relative;
    top: 10px;
    left: 35px;
    font-size: 30px;
    font-weight: 700;
    color: #F2FAFA;
}
</style>